<template>
	<view class="container">
		<uni-forms ref="form" :rules="rules" labelAlign="right" :labelWidth="80" :modelValue="formData">
			<uni-forms-item label="联系方式" :required="true" name="mobilePhone">
				<uni-easyinput type="number" :clearable="true" placeholder="请输入联系方式" v-model="formData.mobilePhone">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="学号" :required="true" name="number">
				<uni-easyinput type="number" :clearable="true" placeholder="请输入学号" v-model="formData.number">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup>
	import {
		GetVerifyCode
	} from "@/apis/user.js"
	import {
		ref,
		defineExpose
	} from "vue";

	const formData = ref({
		mobilePhone: "",
		number: ""
	});

	const rules = {
		mobilePhone: {
			rules: [{
					required: true,
					errorMessage: "请输入联系方式"
				},
				{
					minLength: 11,
					maxLength: 11,
					errorMessage: "联系方式应为11位"
				},
				{
					pattern: /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
					errorMessage: "联系方式格式错误"
				}
			]
		},
		number: {
			rules: [{
					required: true,
					errorMessage: "请输入学号"
				},
				{
					minLength: 11,
					maxLength: 11,
					errorMessage: "学号应为11位"
				}
			]
		}
	}
	const form = ref();

	defineExpose({
		handleNextStep,
		formData
	})

	function handleNextStep() {
		return new Promise((resolve, reject) => {
			form.value.validate().then(res => {
				GetVerifyCode({
					...formData.value
				}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				})
			}).catch(err=>{
				reject(err);
			})
		})
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 20rpx;
	}
</style>
